<script lang="ts" setup>
  import { ref } from 'vue';
  import { Dayjs } from 'dayjs';
  import Space from '@sscd/space';
  import TimePicker from '@sscd/time-picker';
  const value = ref<Dayjs>();
</script>

<template>
  <div class="demo">
    <div class="demo-title">12 小时制</div>
    <div class="demo-content">
      <Space direction="vertical">
        <TimePicker v-model:value="value" use12-hours />
        <TimePicker v-model:value="value" use12-hours format="h:mm:ss A" style="width: 140px" />
        <TimePicker v-model:value="value" use12-hours format="h:mm a" />
      </Space>
    </div>
  </div>
</template>
